<template>
	<view class="hot-sales-products">
		<scroll-view class="sales-container" scroll-x :show-scrollbar="false" :enable-flex="true">
			<view class="products-list">
				<view
					class="product-item"
					v-for="(product, index) in productsWithDefaults"
					:key="product.id"
					@tap="onProductTap(product)"
				>
					<!-- 热销标识 -->
					<view class="hot-badge">
						<cl-icon name="fire" size="12" color="#fff"></cl-icon>
						<text class="badge-text">热销</text>
					</view>

					<!-- 排名标识 -->
					<view class="rank-badge" v-if="index < 3">
						<text class="rank-number">{{ index + 1 }}</text>
					</view>

					<!-- 商品图片 -->
					<view class="image-container">
						<image
							:src="
								'https://shop.sdamdyy.cn/' + product.mainPic ||
								'/static/empty/no.jpg'
							"
							class="product-image"
							mode="aspectFill"
						/>
						<!-- 销量展示 -->
						<view class="sales-overlay">
							<view class="sales-badge">
								<cl-icon name="chart-bar" size="12" color="#fff" />
								<text class="sales-text">{{ formatSales(product.sales) }}</text>
							</view>
						</view>
					</view>

					<!-- 商品信息 -->
					<view class="product-info">
						<text class="product-name">{{ product.title || product.name }}</text>
						<text class="product-spec">{{ product.goodsSpec || product.spec }}</text>

						<!-- 价格区域 -->
						<view class="price-area">
							<view class="price-main">
								<text class="price-symbol">¥</text>
								<text class="current-price">{{
									formatUserPrice(product.price, user, product.noDiscounts)
								}}</text>
							</view>
							<!-- 销售进度 -->
							<view class="progress-area">
								<view class="progress-bar">
									<view
										class="progress-fill"
										:style="{ width: getProgressWidth(product.sales) }"
									></view>
								</view>
								<text class="progress-text">{{
									getProgressText(product.sales)
								}}</text>
							</view>
						</view>

						<!-- 快速购买按钮 -->
						<view class="quick-buy-btn" @tap.stop="onQuickBuy(product)">
							<cl-icon name="cart-plus" size="16" color="#fff" />
							<text class="buy-text">抢购</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 更多热销商品 -->
		<view class="more-section" @tap="onViewMore">
			<text class="more-text">查看更多热销药品</text>
			<cl-icon name="arrow-right" size="16" color="#666" />
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useCool } from "/@/cool";
import { useStore } from "/@/cool/store";
import { formatUserPrice } from "/@/utils/price";
const { user } = useStore();

const props = defineProps<{
	products: any[];
}>();

const emit = defineEmits(["add-cart", "view-more"]);

const { router } = useCool();

// 为产品添加默认值和销量数据
const productsWithDefaults = computed(() => {
	return props.products.map((product, index) => ({
		...product,
		// 模拟热销数据
		sales: product.sales || generateSalesData(index),
		manufacturer: product.manufacturer || "知名制药企业",
		goodsSpec: product.goodsSpec || product.spec || "详见说明书",
		// 根据排名生成不同的销量基数
		baseTarget: 1000 + index * 200,
	}));
});

// 生成销量数据
function generateSalesData(index: number): number {
	// 前三名销量更高
	const baseNum = index < 3 ? 2000 : 800;
	return baseNum + Math.floor(Math.random() * 1000);
}

// 格式化销量显示
function formatSales(sales: number): string {
	if (sales >= 10000) {
		return `${(sales / 10000).toFixed(1)}万+`;
	} else if (sales >= 1000) {
		return `${(sales / 1000).toFixed(1)}k+`;
	}
	return `${sales}+`;
}

// 获取销售进度宽度
function getProgressWidth(sales: number): string {
	// 模拟进度，实际应根据目标销量计算
	const progress = Math.min((sales / 3000) * 100, 100);
	return `${progress}%`;
}

// 获取进度文本
function getProgressText(sales: number): string {
	const progress = Math.min((sales / 3000) * 100, 100);
	if (progress >= 90) return "即将售罄";
	if (progress >= 70) return "热销中";
	if (progress >= 50) return "热卖";
	return "新上架";
}

// 商品点击
function onProductTap(product: any) {
	router.push(`/pages/goods/detail?id=${product.id}`);
}

// 快速购买
function onQuickBuy(product: any) {
	emit("add-cart", product);
}

// 查看更多
function onViewMore() {
	emit("view-more");
	router.push("/pages/goods/list?attribute=2");
}

// 格式化价格
function formatPrice(price: any): string {
	if (!price || price === 0) return "暂无报价";
	const numPrice = Number(price);
	if (isNaN(numPrice)) return "暂无报价";
	return numPrice.toFixed(2);
}
</script>

<style lang="scss" scoped>
.hot-sales-products {
	.sales-container {
		width: 100%;
		white-space: nowrap;
		margin-bottom: 24rpx;
	}

	.products-list {
		display: flex;
		gap: 20rpx;
		padding: 8rpx 16rpx 20rpx;
	}

	.product-item {
		position: relative;
		flex-shrink: 0;
		width: 340rpx;
		background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
		border-radius: 24rpx;
		overflow: hidden;
		transition: all 0.3s ease;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		border: 2rpx solid transparent;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 8rpx 28rpx rgba(255, 71, 87, 0.15);
			border-color: rgba(255, 71, 87, 0.2);
		}
	}

	.hot-badge {
		position: absolute;
		top: 16rpx;
		left: 16rpx;
		display: flex;
		align-items: center;
		gap: 4rpx;
		background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
		padding: 8rpx 16rpx;
		border-radius: 24rpx;
		z-index: 10;
		box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.3);

		.badge-text {
			font-size: 22rpx;
			color: #ffffff;
			font-weight: 600;
		}
	}

	.rank-badge {
		position: absolute;
		top: 16rpx;
		right: 16rpx;
		width: 48rpx;
		height: 48rpx;
		background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		box-shadow: 0 4rpx 12rpx rgba(255, 179, 0, 0.4);

		.rank-number {
			font-size: 24rpx;
			color: #fff;
			font-weight: 700;
		}
	}

	.image-container {
		position: relative;
		width: 100%;
		height: 340rpx;
		overflow: hidden;
	}

	.product-image {
		width: 100%;
		height: 100%;
		background-color: #f8f8f8;
		transition: transform 0.3s ease;
	}

	.product-item:hover .product-image {
		transform: scale(1.05);
	}

	.sales-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
		padding: 40rpx 20rpx 20rpx;
		display: flex;
		justify-content: flex-end;
	}

	.sales-badge {
		display: flex;
		align-items: center;
		gap: 6rpx;
		background-color: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10rpx);
		padding: 8rpx 16rpx;
		border-radius: 24rpx;

		.sales-text {
			font-size: 22rpx;
			color: #333;
			font-weight: 600;
		}
	}

	.product-info {
		padding: 24rpx;
		position: relative;
	}

	.product-name {
		display: block;
		font-size: 32rpx;
		color: #1a1a1a;
		font-weight: 600;
		line-height: 1.4;
		margin-bottom: 8rpx;
		height: 88rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.product-spec {
		display: block;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.price-area {
		margin-bottom: 20rpx;
	}

	.price-main {
		display: flex;
		align-items: baseline;
		margin-bottom: 12rpx;

		.price-symbol {
			font-size: 26rpx;
			color: #ff4757;
			font-weight: 600;
		}

		.current-price {
			font-size: 40rpx;
			font-weight: 700;
			color: #ff4757;
			margin-left: 2rpx;
		}
	}

	.progress-area {
		.progress-bar {
			width: 100%;
			height: 8rpx;
			background-color: #f0f0f0;
			border-radius: 4rpx;
			overflow: hidden;
			margin-bottom: 8rpx;

			.progress-fill {
				height: 100%;
				background: linear-gradient(90deg, #ff9a56 0%, #ff4757 100%);
				border-radius: 4rpx;
				transition: width 0.3s ease;
			}
		}

		.progress-text {
			font-size: 22rpx;
			color: #ff4757;
			font-weight: 500;
		}
	}

	.quick-buy-btn {
		position: absolute;
		bottom: 24rpx;
		right: 24rpx;
		display: flex;
		align-items: center;
		gap: 6rpx;
		background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
		padding: 12rpx 20rpx;
		border-radius: 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.3);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.4);
		}

		.buy-text {
			font-size: 24rpx;
			color: #fff;
			font-weight: 600;
		}
	}

	.more-section {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		padding: 24rpx;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		margin: 0 16rpx;
		transition: all 0.3s ease;

		&:active {
			background-color: #e9ecef;
			transform: scale(0.98);
		}

		.more-text {
			font-size: 28rpx;
			color: #666;
			font-weight: 500;
		}
	}
}
</style>
